<template>
  <div id="rich"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
let myRich = null;
let myEchart = null;
onMounted(() => {
  myRich = document.getElementById("rich");
  myEchart = echarts.init(myRich);
  let option = {
    tooltip: {},
    xAxis: {
      type: "category",
      data: ["d1", "d2", "d3", "d4"],
    },
    yAxis: {},
    series: [
      {
        type: "custom",
        itemStyle: {
            color: 'red'
        },
        renderItem: (params, api) => {
          let pos = api.coord([api.value(0), api.value(1)]);
          return {
            type: "circle",
            shape: {
              cx: pos[0],
              cy: pos[1],
              r: 5,
            },
            style: api.style(),
          };
        },
        data: [
          [0, 123, 3],
          [1, 23, 4],
          [2, 23, 5],
          [3, 123, 6],
        ],
      },
    ],
  };
  myEchart.setOption(option);
});
onUnmounted(() => {
  myEchart.dispose(myRich);
});
</script>

<style lang="less" scoped>
#rich {
  width: 800px;
  height: 400px;
}
</style>
